<template>
	<yd-layout id='courseDetail' class=''>
		<div ref='scroolRef' id='scroolId' style="overflow: auto;">
			<div class="header">
				<img class="header_img" :src="courseDetail.title_img" alt="" />
				<div class="header_bottm">
					<div class="header_title c_size_34_48">{{courseDetail.title}}</div>
					<div class="header_study">
						<div>共{{courseDetail.video_count}}节课</div>
						<span></span>
						<div>{{courseDetail.watch_count}}次学习</div>
					</div>
				</div>
			</div>
			<div class="content" >
				<div :class="showKong?'nav_fixed':''" class="nav" ref='navRef'>
					<!--<div @click="navNum=1" :class="navNum==1?'nav_active':''" class="nav_list">
						<div>课程介绍</div>
						<span></span>
					</div>-->
					<div @click="navNum=2" :class="navNum==2?'nav_active':''" class="nav_list">
						<div>课程目录</div>
						<span></span>
					</div> 
					<div @click="navNum=3" :class="navNum==3?'nav_active':''" class="nav_list">
						<div>学员感悟</div>
						<span></span>
					</div>
				</div>
				<div class="nav_kong" v-show="showKong"></div>
				<div class="content_list">
					<div class="nav_list_1" v-show="navNum==1">
						<div class="c_v_html" v-html="courseDetail.content"></div>
					</div>
					<div class="nav_list_2"  v-show="navNum==2">
						<div @click="goCourseAudioDetailVip(item)" class="list_2_item" v-for="item,index in videoList">
							<!--<div class="list_2_item_left">{{index+1}}.</div>-->
							<div class="list_2_item_right">
								<div class="c_size_34_48 c_text_ellipsis_2">{{item.title}}</div>
								<div class="list_2_item_right_play">{{item.watch_count}}次学习</div>
							</div>
						</div>
						<div v-if='videoList.length==0' class="no_list">暂无内容</div>
					</div>
					<div class="nav_list_3"  v-show="navNum==3">
						<yd-infinitescroll  v-show='commentList.length>0' :callback="getCommetnList" ref="infinitescrollDemo">
							<StudentShareList  audioType='true' slot="list"  :dataList='commentList'></StudentShareList>
							<!-- 数据全部加载完毕显示 -->
					        <span slot="doneTip">没有更多数据了~~</span>
					
					        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
					        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
						</yd-infinitescroll>
						<div v-if='commentList.length==0' class="no_list">暂无内容</div>
					</div>
				</div>
			</div>
			<yd-backtop></yd-backtop>
		</div>
		
	</yd-layout>
</template>

<script>
	import StudentShareList from '../../components/StudentShareList/StudentShareList.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	export default{
		components:{
			[StudentShareList.name]:StudentShareList,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]:BackTop,
			navOffTop:'',//橘上面的高度
		},
		data(){
			return {
				navNum:2,
				videoList:[],
				courseDetail:{},
				videoId:'',
				commentList:[],
				pageNum:1,
				pageCount:10,
				showKong:false,
			}
		},
		created() {
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			document.title='课程详情'
			this.getCourseDetail();
			this.getCommetnList()
			this.navOffTop=this.$refs.navRef.offsetTop
			
			this.$refs.scroolRef.addEventListener('scroll',this.handleScroll)
		},
		methods:{
			handleScroll(height){
				//定位
				if(this.$refs.scroolRef.scrollTop>this.navOffTop){
					this.showKong=true
				}else{
					this.showKong=false
				}
			},
			async goCourseAudioDetailVip(item){
				item.isNoRouter = true
				var data = await this.$root.hqcPlayFlg(item);
				this.$router.push({
					name:'courseVideoDetailVip',
					query:{
						id:item.id,
					}
				})
			},
			getCommetnList(){
				this.$root.ajax({
					name: 'hqc/comments',
					type:'get',
					params: {
						page:this.pageNum,
						count:this.pageCount,
						//kind:100,
						id:this.$route.query.id,
//						kind:0,
//						oid:522
					}
				}).then((d) => {
					let date = new Date()
					for(let a = 0 ;a<d.data.comment_list.length;a++){
						//刚刚
						if(date-d.data.comment_list[a].create_time*1000<60*1000){  //60s
							d.data.comment_list[a].newTime = '刚刚'
						}else if(date-d.data.comment_list[a].create_time*1000<5*60*1000){ //5min
							d.data.comment_list[a].newTime = '5分钟之内'
						}else if(date-d.data.comment_list[a].create_time*1000<30*60*1000){ //30min
							d.data.comment_list[a].newTime = '30分钟之内'
						}else if(date-d.data.comment_list[a].create_time*1000<3*60*60*1000){ //3h
							d.data.comment_list[a].newTime = '3小时之内'
						}else if(date-d.data.comment_list[a].create_time*1000<24*60*60*1000){ //24
							d.data.comment_list[a].newTime = '24小时之内'
						}else {
							let plDate = new Date(d.data.comment_list[a].create_time*1000)
							let month = plDate.getMonth()
							let day = plDate.getDate()
							if(date.getFullYear() == plDate.getFullYear()){
								d.data.comment_list[a].newTime = (month+1 < 10 ? '0' + (month + 1) : (month + 1)) + '-' + (day < 10 ? '0' + day : day)
							}else{
								d.data.comment_list[a].newTime = plDate.getFullYear() + '-' + (month+1 < 10 ? '0' + (month + 1) : (month + 1)) + '-' + (day < 10 ? '0' + day : day) 
							}
						}
					}
					
					console.log(d.data)
					this.commentList = [...this.commentList, ...d.data.comment_list];
                    if (this.commentList.length >= d.data.comment_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
				})
			},
			getCourseDetail(){
				this.$root.ajax({
					name:'hqc/detail',
					type:'get',
					params:{
						id:this.$route.query.id
					}
				}).then((d)=>{
					this.courseDetail = Object.assign({},this.courseDetail,d.data.course)
					this.videoList = d.data.video_list 
					this.$nextTick(()=>{
						this.navOffTop=this.$refs.navRef.offsetTop
						
					})
					
					//分享
					if(this.$root.isWeiXin()){
						//分享
						let query = '';
						if(this.$root.config.channel){
						 	query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}`
						}else{
						 	query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}`
						}
						this.$root.wxShare({
							d:{title:this.courseDetail.title,title_img:this.courseDetail.title_img_mini},//分享对象，题目等{title:'',title_img:''}
							query: query,//参数
							desc:`${this.courseDetail.video_count}节课程 | ${this.courseDetail.watch_count}次学习`//分享详情
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './courseDetail.scss';
</style>